<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}管理后台{% endblock %} - 个人博客</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="{{ url_for('static', filename='js/tailwind.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chart.min.js') }}"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007bff',
                        secondary: '#6c757d',
                        success: '#28a745',
                        danger: '#dc3545',
                        warning: '#ffc107',
                        info: '#17a2b8',
                        light: '#f8f9fa',
                        dark: '#343a40',
                    }
                }
            }
        }
    </script>
    
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div class="flex min-h-screen">
        <!-- 侧边栏 -->
        {% include 'admin/sidebar.html' %}
        
        <!-- 主内容区域 -->
        <div class="flex-1 ml-64 flex flex-col min-h-screen transition-all duration-300">
            <!-- 顶部导航栏 -->
            {% include 'admin/header.html' %}
            
            <!-- 页面内容 -->
            <div class="flex-1 p-5 flex flex-col overflow-x-hidden">
                <div class="w-full max-w-full">
                    {% block content %}{% endblock %}
                </div>
            </div>
            
            <!-- 页脚 -->
            {% include 'admin/footer.html' %}
        </div>
    </div>
    
    <!-- 侧边栏折叠功能已移至 sidebar.html 中 -->
    
    <!-- 引入通用工具库 -->
    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    
    <style>
        .notification {
            padding: 1rem;
            border-radius: 0.5rem;
            color: white;
            font-weight: 500;
            margin-bottom: 0.5rem;
            max-width: 20rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
            animation: slideIn 0.3s ease;
        }
        
        .notification-success {
            background-color: #10b981;
        }
        
        .notification-error {
            background-color: #ef4444;
        }
        
        .notification-warning {
            background-color: #fbbf24;
            color: #1f2937;
        }
        
        .notification-info {
            background-color: #3b82f6;
        }
        
        .notification-close {
            background-color: transparent;
            border: 0;
            color: inherit;
            font-size: 1.25rem;
            cursor: pointer;
            margin-left: 0.5rem;
            padding: 0;
            opacity: 0.8;
        }
        
        .notification-close:hover {
            opacity: 1;
        }
        
        .custom-confirm-overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }
        
        .custom-confirm-dialog {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-width: 28rem;
            width: 91.666667%;
        }
        
        .custom-confirm-header {
            padding: 1.5rem 1.5rem 0 1.5rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .custom-confirm-header h3 {
            margin: 0 0 1rem 0;
            color: #4b5563;
            font-size: 1.125rem;
        }
        
        .custom-confirm-header i {
            color: #fbbf24;
            margin-right: 0.5rem;
        }
        
        .custom-confirm-body {
            padding: 1.5rem;
        }
        
        .custom-confirm-body p {
            margin: 0;
            color: #6b7280;
            line-height: 1.625;
        }
        
        .custom-confirm-footer {
            padding: 0 1.5rem 1.5rem 1.5rem;
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }
        
        .btn-confirm-cancel {
            padding: 0.5rem 1rem;
            border: 0;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s;
            background-color: #6b7280;
            color: white;
        }
        
        .btn-confirm-cancel:hover {
            background-color: #4b5563;
        }
        
        .btn-confirm-ok {
            padding: 0.5rem 1rem;
            border: 0;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s;
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-confirm-ok:hover {
            background-color: #2563eb;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        .pagination {
            @apply flex justify-center items-center my-8 gap-1;
        }
        
        .pagination a,
        .pagination span {
            @apply inline-block px-3 py-2 mx-0.5 border border-gray-300 rounded text-blue-500 no-underline text-sm transition-all duration-200 min-w-10 text-center;
        }
        
        .pagination a:hover {
            @apply bg-gray-100 border-gray-400 text-blue-600;
        }
        
        .pagination .current {
            @apply bg-blue-500 border-blue-500 text-white font-medium;
        }
        
        .pagination .disabled {
            @apply text-gray-500 bg-white border-gray-300 cursor-not-allowed;
        }
        
        .pagination .ellipsis {
            @apply text-gray-500 bg-transparent border-0 cursor-default;
        }
    </style>
    
    {% block extra_js %}{% endblock %}
</body>
</html>
